<template>
  <div class="video">
    <div class="head-mv">
      <div class="mv-box">
        <div class="mv-video">
          <video :src="video.url" controls></video>
        </div>
      </div>
    </div>
    <ListTitle>MV评论</ListTitle>
    <Comment :item="comment"></Comment>
  </div>
</template>

<script>
import ListTitle from '@/components/ListTitle.vue'
import Comment from '@/components/Comment.vue'
export default {
    components:{ListTitle,Comment},
  props: ["pid"],
  data() {
    return {
      video: [],
      comment: [],
    };
  },
  created() {
    this.getVideos();
    this.getMvcomment()
  },
  methods: {
    async getVideos() {
      let re = await this.axios.get("/mv/url?id=" + this.pid);
      this.video = re;
      console.log("videos==>", re);
    },
    async getMvcomment(){
        let re = await this.axios.get("/comment/mv?id=" + this.pid);
        this.comment = re.comments
        console.log("评论",this.comment)
    }
  },
};
</script>

<style lang="less" scoped>
.video {
  position: relative;
  background-color: #fcfcfd;
  height: 100%;
  .head-mv {
    min-height: 100%;
    box-sizing: border-box;
    .mv-box {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      .mv-video {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        padding: 0;
        video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>